<template>
    <div id="datatotal">
        <page-title>
            <span slot="pageName">数据统计</span>
        </page-title>

        <!-- 图表 -->
        <div class="chatbox">
            <!-- 柱状图 -->
            <div id="echart"></div>
            <!-- 饼状图 -->
            <!-- <div id="circle" ></div> -->
        </div>
        <!-- 创客构成图 -->
    </div>
</template>

<script>
import PageTitle from '@/components/PageTitle'
import pieChart from "echarts"

    export default {
        data() {
            return {
                dataTotal: {}
            }
        },
        components: {
            PageTitle,
        },
        computed: {
            token() {
                return this.$store.state.token; 
            },
        },
        mounted () {
            this.getAllData();
            this.sizeChange()
        },
        methods: {
            // 获取统计数据
            async getAllData() {
                let res = await this.$axios.post("/admin/index/memzong", { token: this.token })
                console.log(res);
                let code = res.data.code
                if (code == 200) {
                    this.dataTotal = res.data.data
                    //  this.DrawCircle()
                     this.DrawEchart()
                    
                } else {
                    this.dataTotal = []
                }
                
            },
            DrawEchart() {
                let user = this.dataTotal
                let myChart = this.$echarts.init(document.getElementById('echart'))
                    var seriesLabel = {
                        normal: {
                            show: true,
                            textBorderColor: '#333',
                            textBorderWidth: 2
                        }
                    }
                myChart.setOption({
                        title: {
                            text: '会员新增数据图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['创客', '代理', '普通会员']
                        },
                        grid: {
                            left: 100
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'value',
                            name: '数量',
                            
                        },
                        yAxis: {
                            type: 'category',
                            inverse: true,
                            data: ['当日新增', '当月新增'],
                            axisLabel: {
                                
                                margin: 20,
                                rich: {
                                    value: {
                                        lineHeight: 30,
                                        align: 'center'
                                    },
                                    Sunny: {
                                        height: 40,
                                        align: 'center',
                                       
                                    },
                                    Cloudy: {
                                        height: 40,
                                        align: 'center',
                                        
                                    },
                                    Showers: {
                                        height: 40,
                                        align: 'center',
                                        
                                    }
                                }
                            }
                        },
                        series: [
                            {
                                name: '创客',
                                type: 'bar',
                                data: [user.dayck, user.monthck, user.memck],
                                label: seriesLabel,
                                markPoint: {
                                    symbolSize: 1,
                                    symbolOffset: [0, '50%'],
                                    label: {
                                    
                                        backgroundColor: 'rgb(242,242,242)',
                                        borderColor: '#aaa',
                                        borderWidth: 1,
                                        borderRadius: 4,
                                        padding: [4, 10],
                                        lineHeight: 26,
                                        // shadowBlur: 5,
                                        // shadowColor: '#000',
                                        // shadowOffsetX: 0,
                                        // shadowOffsetY: 1,
                                        position: 'right',
                                        distance: 20,
                                        rich: {
                                            a: {
                                                align: 'center',
                                                color: '#fff',
                                                fontSize: 18,
                                                textShadowBlur: 2,
                                                textShadowColor: '#000',
                                                textShadowOffsetX: 0,
                                                textShadowOffsetY: 1,
                                                textBorderColor: '#333',
                                                textBorderWidth: 2
                                            },
                                            b: {
                                                color: '#333'
                                            },
                                            c: {
                                                color: '#ff8811',
                                                textBorderColor: '#000',
                                                textBorderWidth: 1,
                                                fontSize: 22
                                            }
                                        }
                                    },
                                    data: [
                                        {type: 'max', name: 'max days: '},
                                        {type: 'min', name: 'min days: '}
                                    ]
                                }
                            },
                            {
                                name: '代理',
                                type: 'bar',
                                label: seriesLabel,
                                data: [user.daydai, user.monthdai, user.memdai]
                            },
                            {
                                name: '普通会员',
                                type: 'bar',
                                label: seriesLabel,
                                data: [user.dayz, user.monthz, user.memzong]
                            }
                        ]
                    
                })
            },
            DrawCircle() {
                let user = this.dataTotal
                let circleChat = pieChart.init(document.getElementById('circle'))
                 
                    circleChat.setOption = ( {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 10,
                            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: ['50%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        show: true,
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        show: false
                                    }
                                },
                                data: [
                                    {value: 335, name: '直接访问'},
                                    {value: 310, name: '邮件营销'},
                                    {value: 234, name: '联盟广告'},
                                    {value: 135, name: '视频广告'},
                                    {value: 1548, name: '搜索引擎'}
                                ]
                            }
                        ]
                    } )
              
            },
            // resize
            sizeChange() {
                window.onresize = this.getAllData()
            },
        },
    }
</script>

<style lang="scss" scoped>
#datatotal {
    width: 100%;
    height: 100%;
    
    .chatbox {
        width: 100%;
        // height: 100%;
        padding-top: 30px;
        // display: flex;
        #echart {
            width: 100%;
            height: 600px;
        }
        #circle {
            width: 100%;
            height: 600px;
        }
       
    }
}
</style>